<!--  -->
<template>
  <div id="PersonArticle">
    <div class="person-article-head">
      <div>
        <span>文章</span>&nbsp;&nbsp;
        <span>
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ articleClass }}
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="articleHeadDropdown('分类')">分类</el-dropdown-item>
                  <el-dropdown-item v-for="(item,index) in tagList" @click="articleHeadDropdown(item)">
                    {{ item }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
        </span>
      </div>
      <div>
<!--        <span>热门</span>-->
<!--        <span></span>-->
<!--        <span>最新</span>-->
      </div>
    </div>

    <div class="person-article-content">
      <div class="foreach-content"
           v-for="(item,index) in tmpBlogTagList"
           :key="item.id"
      >
        <div>
          <div>
            {{ userObject.username }}
            <span class="vertical-line"></span>
            8月前
            <span class="vertical-line"></span>
            {{ articleClass == "分类" ? item.tagName : articleClass }}
            <span class="vertical-point"></span>
            {{ item.flag || '' }}
          </div>
          <div @click="toArticle(item.id)">{{ item.title }}</div>
          <div v-html="item.content.replaceAll(/<[^>]+>/g,'')" @click="toArticle(item.id)">
          </div>
          <div>
            <span>
              <el-icon><View/></el-icon>&nbsp;{{ item.views }}
            </span>
            <span>
              <el-icon><Pointer/></el-icon>&nbsp;{{ item.likesCount }}
            </span>
            <span>
              <el-icon><ChatRound/></el-icon>&nbsp;1
            </span>
            <span>
              <el-dropdown :hide-on-click="true">
                <el-icon style="transform: translateY(1vh)"><More/></el-icon>&nbsp;
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="toPublish(item)">编辑</el-dropdown-item>
                    <el-dropdown-item @click="deleteBlog(item)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </span>
          </div>
        </div>
        <div class="block">
          <el-image style="width: 100px; height: 100px"
                    :src="item.firstPicture"
                    fit="fill"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import {View, Pointer, ChatRound,More} from '@element-plus/icons-vue'
import {selectTagNameByUser} from "@/api/blog/tag";
import {selectBATByUser,delBlog} from "@/api/blog/blog";
import {mapState, mapGetters, mapActions, mapMutations} from "vuex";

export default {
  name: "PersonArticle",
//import引入的组件需要注入到对象中才能使用
  components: {
    View, Pointer, ChatRound,More

  },

  props: {
    userId: {
      type: Number,
      default: null
    },
    userObject:{
      type:Object,
      default: ()=>{}
    }
  },
  data() {
//这里存放数据
    return {
      articleClass: "分类",
      tagList: [],
      pageNum: 1,
      pageSize: 10,
      blogTagList: [],
      tmpBlogTagList: [],
    };
  },
//监听属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},
//方法集合
  methods: {
    ...mapMutations('blog',['SET_EDITBLOG']),
    articleHeadDropdown(tag) {
      // console.log("_this",_this)
      console.log("tag", tag)
      this.articleClass = tag
      this.filterBlogTagList()
    },

    load() {
      selectTagNameByUser({
        userId: this.userId
      }).then((res) => {
        this.tagList = res.data
      })
    },
    loadBlogTag() {
      selectBATByUser({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userId: this.userId,
        tagName: this.articleClass == "分类" ? '' : this.articleClass
      }).then((res) => {
        this.blogTagList = res.data.records
        this.filterBlogTagList()
        // console.log("blogTagList",this.blogTagList)
      })
    },
    filterBlogTagList() {
      console.log("this.articleClass == \"分类\"", this.articleClass == "分类")
      if (this.articleClass == "分类") {
        // console.log("blogTagList",this.blogTagList)
        this.tmpBlogTagList = this.blogTagList
        return
      }
      // console.log("blogTagList2",this.blogTagList)
      this.tmpBlogTagList = this.blogTagList
          .filter((item) => {
            if(item.tagList == null || item.tagList == [] || item.tagList == undefined) {
              return false
            }
            return item.tagList.includes(this.articleClass)
          })
    },

    toArticle(userId){
      this.$router.push('/blog/' + userId)
    },

    toPublish(editBlog){
      // this.$router.push('/publish')
      this.$router.push({
        name: 'ForePublish',
        // params: {
        //   editBlog:JSON.stringify(editBlog)
        // }
      })
      this.SET_EDITBLOG(editBlog)

    },

    deleteBlog(blog){
      delBlog({
        blogId:blog.id
      }).then((res)=>{
        if(res.code == 0){
          location.reload()
        }
      })
    },

  },
//生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.load()
    this.loadBlogTag()
  },
//生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log("userId",this.userId)
    // console.log("userObject",this.userObject)
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
@import url('../../style/blog/PersonArticle.less');
@import url('../../style/public/common.less');
</style>

